<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>购物车</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        .container { max-width: 1000px; margin: 0 auto; padding: 16px; }
    </style>
</head>
<body>
<div id="app" class="container">
    <el-page-header @back="go('/')" content="购物车"></el-page-header>
    <el-table :data="rows" style="width: 100%; margin-top: 12px;">
        <el-table-column prop="name" label="商品"></el-table-column>
        <el-table-column prop="price" label="单价" width="140">
            <template #default="{row}"><el-text type="danger">¥{{row.price}}</el-text></template>
        </el-table-column>
        <el-table-column label="数量" width="180">
            <template #default="{row}">
                <el-input-number v-model="row.qty" :min="1" @change="onQty(row)"></el-input-number>
            </template>
        </el-table-column>
        <el-table-column label="小计" width="160">
            <template #default="{row}">¥{{(row.price*row.qty).toFixed(2)}}</template>
        </el-table-column>
        <el-table-column label="操作" width="140">
            <template #default="{row}">
                <el-button type="danger" size="small" @click="removeItem(row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div style="display:flex; justify-content:flex-end; margin-top:12px; align-items:center; gap:12px;">
        <div>合计：<el-text type="danger" tag="b">¥{{total.toFixed(2)}}</el-text></div>
        <el-button type="primary" @click="go('/order/confirm')">去结算</el-button>
    </div>
</div>

<script>
const { createApp, ref, onMounted, computed } = Vue
createApp({
    setup(){
        const rows = ref([])
        const total = computed(()=> rows.value.reduce((s, r)=> s + r.price * r.qty, 0))
        const syncLocal = ()=>{
            const map = {}
            rows.value.forEach(r=> map[r.id] = r.qty)
            localStorage.setItem('cart', JSON.stringify(map))
        }
        const onQty = (row)=>{ if(row.qty<1) row.qty=1; syncLocal() }
        const removeItem = (row)=>{ rows.value = rows.value.filter(r=> r.id!==row.id); syncLocal() }
        const go = (p)=>{ window.location.href = p }
        onMounted(async ()=>{
            const cart = JSON.parse(localStorage.getItem('cart') || '{}')
            const ids = Object.keys(cart)
            const list = []
            for(const id of ids){
                const res = await fetch('/api/products/' + id)
                const p = await res.json()
                list.push({ id: Number(id), name: p.name, price: Number(p.price||0), qty: Number(cart[id]||1) })
            }
            rows.value = list
        })
        return { rows, total, onQty, removeItem, go }
    }
}).use(ElementPlus).mount('#app')
</script>
</body>
</html>


